﻿<!-- v-click-outside="clickoutSide" -->
<div v-click-outside="handleClose" v-cloak>
    <!-- 展示树 -->
    <div style="margin:5px">
        <el-input v-if="treeModel=='normal'" v-show="showSearchInput" class="selecttree-input" auto-complat="off" placeholder="输入关键字"
            v-model="filterNodeText" suffix-icon="el-icon-search">
        </el-input>
    </div>
    <el-tree v-if="treeModel=='normal'" v-show="treeVisiable" empty="暂无数据" :highlight-current=true :default-expand-all=false
        :data="treeData" class="selecttree-input objecttree" ref="tree" node-key="id" @node-click="nodeClick" @check-change="handleClick"
        :filter-node-method="filterNode" :style="{height:treeBodyHeight_Pass+'px',width:treeBodyWidth+'px'}"></el-tree>
    <!-- 选择控件树 -->
    <!-- 单选树 -->
    <el-input :placeholder="treeHolder" v-if="treeModel=='single'" class="selecttree-input" auto-complat="off" :value="treeSelectName"
        @click.native="changeTreeVisiable" :id="treeID" :disabled="disabled" :style="{width:treeBodyWidth+'px'}"></el-input>
    <div class="objecttree" :style="{height:treeBodyHeight+'px',width:treeBodyWidth+'px'}" v-if="treeModel=='single'" v-show="treeVisiable">
        <!-- 操作区域 -->
        <el-row>
            <el-col :span=24>
                <el-button size="mini" style="float:right;margin:5px" @click="closeTree">关闭</el-button>
                <el-button size="mini" style="float:right;margin:5px" @click="clearTree">清除</el-button>
            </el-col>
        </el-row>
        <!-- 分割线 -->
        <div style="height:1px;background-color: #dcdfe6"></div>
        <!-- 搜索框 -->
        <div style="margin:5px">
            <el-input v-if="treeModel=='single'" v-show="showSearchInput" class="selecttree-input" auto-complat="off" placeholder="输入关键字"
                v-model="filterNodeText" suffix-icon="el-icon-search">
            </el-input>
        </div>
        <el-tree v-if="treeModel=='single'" v-show="treeVisiable" empty="暂无数据" :highlight-current=true :default-expand-all=false
            :data="treeData" class="selecttree-input" ref="tree" node-key="id" @node-click="nodeClick" @check-change="handleClick"
            :filter-node-method="filterNode" :style="{height:(treeBodyHeight-95)+'px',width:treeBodyWidth+'px'}">
            <span style="width:100%" slot-scope="{node,data}">
                <el-radio :value="treeSelectValue_Pass" :label="data.id">
                    <span>{{data.label}}</span>
                </el-radio>
            </span>
        </el-tree>
    </div>

    <!-- 多选树 -->
    <el-input :placeholder="treeHolder" v-if="treeModel=='multi'" class="selecttree-input" auto-complat="off" :value="treeSelectName"
        @click.native="changeTreeVisiable" :id="treeID" :disabled="disabled" type="textarea" :rows="treeTxtRow" :style="{width:treeBodyWidth+'px'}">
    </el-input>
    <div class="objecttree" :style="{height:treeBodyHeight+'px',width:treeBodyWidth+'px'}" v-if="treeModel=='multi'" v-show="treeVisiable">
        <!-- 操作区域 -->
        <el-row>
            <el-col :span=24>
                <el-button size="mini" style="float:right;margin:5px" @click="closeTree">关闭</el-button>
                <el-button size="mini" style="float:right;margin:5px" @click="clearTree">清除</el-button>
            </el-col>
        </el-row>
        <!-- 分割线 -->
        <div style="height:1px;background-color: #dcdfe6"></div>
        <!-- 搜索框 -->
        <div style="margin:5px">
            <el-input v-if="treeModel=='multi'" v-show="showSearchInput" class="selecttree-input" auto-complat="off" placeholder="输入关键字"
                v-model="filterNodeText" suffix-icon="el-icon-search">
            </el-input>
        </div>
        <el-tree v-if="treeModel=='multi'" v-show="treeVisiable" empty="暂无数据" :highlight-current=true :default-expand-all=false :data="treeData"
            class="selecttree-input objecttree" ref="tree" :show-checkbox="treeModel=='multi'" node-key="id" @node-click="nodeClick"
            @check-change="handleClick" :filter-node-method="filterNode" :style="{height:(treeBodyHeight-95)+'px',width:treeBodyWidth+'px'}">
        </el-tree>
    </div>




</div>